<template>
    <div class="login">
      <div class="bg-container">
        <div class="login-box">
          <div class="left">
            <div class="content"></div>
          </div>
          <div class="right">
            <div class="content">
              <div class="title">小宝口袋.管理系统</div>
              <div class="text-wrapper">
                <input type="text" class="user" placeholder="用户名" ref="account" value="qianyi">
                <span class="icon"></span>
              </div>
              <div class="pwd-wrapper">
                <input type="password" class="pwd" placeholder="密码" ref="password" value="qy2017">
                <span class="icon"></span>
              </div>
              <div class="submit-wrapper">
                <button class="smt" @click="_submit">登录</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import {setStorage}  from '../../common/js/localStorage'
    import {getStorage}  from '../../common/js/localStorage'
    const $post = '47.94.219.0:8088';
    const ERR_OK = 200;
    const CUSTOM_ERR_OK = 900000;

    export default {
      name: "login",
      methods:{
        _submit(){
          // this.$router.push('/admin')
          // return
          let _this = this;
          let account = this.$refs['account'].value
          let password = this.$refs['password'].value
          axios({
            method: 'post',
            url:'http://'+$post+'/admin/signIn',
            params: {
              account:account,
              password:password
            }
          }).then((res)=>{
            if(res.status===ERR_OK){
              if(res.data.status === CUSTOM_ERR_OK){
                let data = res.data.data
                //登录成功将user信息保存在localStorage中
                setStorage('Authorization','Bearer'+' '+data.token)
                setStorage('name',data.name)
                setStorage('icon',data.icon)
                setStorage('account',data.account)
                setStorage('menu',data.menu)
                setStorage('user',data)
                //判断user信息是否已保存在localStorage中，都不为空则跳转登录路由
                if(getStorage('user')){
                  _this.$router.push({path:'/admin/apporvingSystem',params:{mark:'1'}})
                }
              }
            }
          })
        },
        _changePassWord(){
          let oldPwd = this.$refs['oldPwd'].value
          let newPwd = this.$refs['newPwd'].value
          axios.post('http://'+$post+'/admin/changePassword',
            {
              oldPass:oldPwd,
              newPass:newPwd
            },
            {
              headers: {
                'Authorization': getStorage('token')
              }
            }
          )
            .then(res => {
              console.log(res)
            })
            .catch(e => {
              console.log(e)
            })
        }
      }
    }
</script>

<style scoped lang="stylus">
  .login
    position absolute
    height 100%
    width 100%
    background linear-gradient(to top, #11bdff,#2067bc)
    .bg-container
      height 100%
      width 100%
      position relative
      background-image url("quan_bg.png"),url("quan_bg.png")
      background-repeat no-repeat no-repeat
      background-size 240px auto,120px auto
      background-position -100px 33% ,calc(100% + 30px) calc(100% + 30px)
      .login-box
        position absolute
        top calc(50% - 212px)
        left calc(50% - 331px)
        display flex
        width 663px
        height 424px
        background url('form-box-bg.png')no-repeat 0 0 /100% 100%
        border-radius 6px
        .left
          flex 1
          .content
            width 226px
            height 231px
            background #c4c86b
            margin-top 97px
            margin-left 75px
            /*border 1px dashed #838993*/
            background url("left-bg.png")no-repeat 0 0/100% 100%
        .right
          flex 1
          .content
            margin-top 64px
            margin-left 17px
            background url("form-bg.png")no-repeat 0 0 /100% 100%
            height 289px
            width 253px
            .text-wrapper,.pwd-wrapper,.title,.submit-wrapper
              text-align center
            .text-wrapper
              padding-top 25px
              position relative
              .user
                width 148px
                height 33px
                border 1px solid #D7D7D7
                background #F6F6F6
                border-radius 4px
                padding-left 8px
                padding-right 24px
                color #BABABA
                font-size 12px
                &:focus
                  border 1px solid #00a0dc
              .icon
                display block
                width 15px
                height 16px
                background url("user.png")no-repeat 0 0 /15px 16px
                position absolute
                bottom 9px
                right 46px
            .pwd-wrapper
              padding-top 23px
              position relative
              .pwd
                width 148px
                height 33px
                border 1px solid #D7D7D7
                background #F6F6F6
                border-radius 4px
                padding-left 8px
                padding-right 24px
                color #BABABA
                font-size 12px
                &:focus
                  border 1px solid #00a0dc
              .icon
                display block
                width 14px
                height 18px
                background url("pwd.png")no-repeat 0 0 /14px 18px
                position absolute
                bottom 9px
                right 46px
            .submit-wrapper
              padding-top 40px
              .smt
                width 180px
                height 33px
                background #14A1E7
                border none
                border-radius 4px
                color #ffffff
                font-size 13px
                cursor pointer
                letter-spacing:4px
                &:hover
                  background linear-gradient(#14A1E7,#1391d1)
            .title
              font-size 14px
              text-align center
              padding-top 42px
              color #3A3A3A


</style>
